<template>
  <div class="solve-problem-container">
    <div class="page-header">
      <el-button @click="$router.back()" icon="ArrowLeft" text>返回题目列表</el-button>
      <h1 class="page-title">{{ problem?.title || '题目详情' }}</h1>
    </div>

    <div v-if="problem" class="problem-content">
      <div class="problem-description">
        <h3>题目描述</h3>
        <div class="description-content" v-html="formatDescription(problem.description)"></div>
        
        <div class="problem-details">
          <el-tag :type="getDifficultyType(problem.difficulty)" size="small">
            {{ getDifficultyText(problem.difficulty) }}
          </el-tag>
          <el-tag v-if="problem.language" type="info" size="small">
            {{ problem.language }}
          </el-tag>
          <span v-if="problem.points" class="points">{{ problem.points }}分</span>
        </div>

        <!-- 选择题选项 -->
        <div v-if="problem.type === 'choice' && problem.options" class="choice-options">
          <h4>选项：</h4>
          <div class="options-list">
            <div
              v-for="(option, index) in parseOptions(problem.options)"
              :key="index"
              class="option-item"
              :class="{ selected: selectedAnswer === String.fromCharCode(65 + index) }"
              @click="selectedAnswer = String.fromCharCode(65 + index)"
            >
              <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
              <span class="option-text">{{ option }}</span>
            </div>
          </div>
        </div>

        <!-- 填空题答案 -->
        <div v-if="problem.type === 'blank'" class="blank-answer">
          <h4>答案：</h4>
          <el-input
            v-model="blankAnswer"
            placeholder="请输入答案，多个答案用逗号分隔"
          />
        </div>

        <!-- 简答题答案 -->
        <div v-if="problem.type === 'short'" class="short-answer">
          <h4>答案：</h4>
          <el-input
            v-model="shortAnswer"
            type="textarea"
            :rows="6"
            placeholder="请输入您的答案..."
          />
        </div>

        <!-- 输入输出格式 -->
        <div v-if="problem.type === 'code'" class="format-section">
          <h4>📥 输入格式</h4>
          <pre class="format-content">{{ problem.input_format || '第一行：一个整数 n (1 ≤ n ≤ 100)\n第二行：n 个整数，用空格分隔\n数据范围：每个整数在 [-1000, 1000] 之间\n\n💡 提示：注意输入数据的类型和范围限制' }}</pre>
        </div>
        
        <div v-if="problem.type === 'code'" class="format-section">
          <h4>📤 输出格式</h4>
          <pre class="format-content">{{ problem.output_format || '输出一个整数，表示最终结果\n\n💡 提示：\n- 确保输出格式完全匹配要求\n- 注意输出数据的类型和精度\n- 不要输出多余的空格或换行' }}</pre>
        </div>

        <!-- 示例 -->
        <div class="example-section" v-if="problem.test_cases && parseTestCases(problem.test_cases).length > 0">
          <h4>📋 示例</h4>
          <div class="example-item">
            <strong>📥 输入:</strong> 
            <pre class="example-content">{{ parseTestCases(problem.test_cases)[0].input || '无' }}</pre>
          </div>
          <div class="example-item">
            <strong>📤 输出:</strong> 
            <pre class="example-content">{{ parseTestCases(problem.test_cases)[0].output || '无' }}</pre>
          </div>
          <div class="example-note">
            <strong>💡 说明:</strong> 这是测试样例，你的程序应该能正确处理这样的输入并产生对应的输出
          </div>
        </div>

        <!-- 数据范围和约束 -->
        <div v-if="problem.type === 'code'" class="constraints-section">
          <h4>⚡ 约束条件</h4>
          <div class="constraint-item" v-if="problem.time_limit">
            <strong>⏱️ 时间限制:</strong> {{ problem.time_limit }}ms
          </div>
          <div class="constraint-item" v-else>
            <strong>⏱️ 时间限制:</strong> 1000ms (默认)
          </div>
          <div class="constraint-item" v-if="problem.memory_limit">
            <strong>💾 内存限制:</strong> {{ problem.memory_limit }}MB
          </div>
          <div class="constraint-item" v-else>
            <strong>💾 内存限制:</strong> 64MB (默认)
          </div>
          <div class="constraint-item">
            <strong>📊 数据范围:</strong> 
            <span v-if="problem.input_format || problem.output_format">
              请参考输入输出格式中的具体说明
            </span>
            <span v-else>
              通常 n ≤ 100, 数据值在 [-1000, 1000] 范围内
            </span>
          </div>
        </div>

        <!-- 编程提示 -->
        <div v-if="problem.type === 'code'" class="tips-section">
          <h4>💡 编程提示</h4>
          <div class="tip-item">
            <strong>📖 格式要求:</strong> 仔细阅读输入输出格式，注意数据类型、范围和格式要求
          </div>
          <div class="tip-item">
            <strong>🔍 边界情况:</strong> 考虑边界值（如 n=1, n=最大值）和特殊情况
          </div>
          <div class="tip-item">
            <strong>⚡ 性能优化:</strong> 注意算法复杂度，避免超时（通常 O(n²) 可能超时）
          </div>
          <div class="tip-item">
            <strong>🧪 测试建议:</strong> 先用"运行代码"测试样例，确认无误后再提交
          </div>
          <div class="tip-item">
            <strong>📝 代码规范:</strong> 注意变量命名、代码结构和错误处理
          </div>
        </div>
      </div>

      <div class="code-editor-section" v-if="problem.type === 'code'">
        <div class="editor-header">
          <h3>代码编辑器</h3>
          <div class="editor-actions">
            <el-select v-model="selectedLanguage" placeholder="选择语言" size="small">
              <el-option label="Python" value="python" />
              <el-option label="JavaScript" value="javascript" />
              <el-option label="Java" value="java" />
              <el-option label="C++" value="cpp" />
            </el-select>
            <el-button type="primary" @click="runCode" :loading="running">
              运行代码
            </el-button>
            <el-button @click="submitCode" :loading="submitting">
              提交答案
            </el-button>
          </div>
        </div>

        <div class="code-editor">
          <MonacoEditor
            v-model="code"
            :language="selectedLanguage"
            :options="editorOptions"
            @change="onCodeChange"
            class="code-textarea"
          />
        </div>

        <div class="output-section">
          <h4>运行结果</h4>
          <div class="output-content">
            <div v-if="runResult" class="output-text">
              <div class="result-status" :class="runResult.status">
                <el-icon v-if="runResult.status === 'AC'"><CircleCheck /></el-icon>
                <el-icon v-else-if="runResult.status === 'WA'"><CircleClose /></el-icon>
                <el-icon v-else-if="runResult.status === 'CE'"><Warning /></el-icon>
                <el-icon v-else><Warning /></el-icon>
                {{ getResultStatusText(runResult.status) }}
              </div>
              
              <!-- 测试用例结果 -->
              <div v-if="runResult.testResults && runResult.testResults.length > 0" class="test-results">
                <div v-for="(testResult, index) in runResult.testResults" :key="index" class="test-result-item">
                  <div class="test-result-header">
                    <span>测试用例 {{ index + 1 }}</span>
                    <el-tag :type="testResult.status === 'AC' ? 'success' : 'danger'" size="small">
                      {{ testResult.status }}
                    </el-tag>
                  </div>
                  <div class="test-result-content">
                    <div><strong>输入:</strong> {{ testResult.input || '无' }}</div>
                    <div><strong>期望输出:</strong> {{ testResult.expected }}</div>
                    <div><strong>实际输出:</strong> {{ testResult.output || '无输出' }}</div>
                    <div v-if="testResult.error"><strong>错误:</strong> {{ testResult.error }}</div>
                  </div>
                </div>
              </div>
              
              <div v-if="runResult.error">
                <strong>错误信息:</strong>
                <pre>{{ runResult.error }}</pre>
              </div>
              <div v-if="runResult.executionTime" class="result-meta">
                执行时间: {{ runResult.executionTime }}ms
                <span v-if="runResult.memoryUsage"> | 内存使用: {{ runResult.memoryUsage }}KB</span>
              </div>
            </div>
            <div v-else class="no-output">
              点击"运行代码"查看结果
            </div>
          </div>
        </div>
      </div>

      <!-- 非编程题提交按钮 -->
      <div v-if="problem.type !== 'code'" class="submit-section">
        <el-button type="primary" @click="submitAnswer" :loading="submitting" size="large">
          提交答案
        </el-button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-else class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  ArrowLeft, Document, Upload, VideoPlay, Close, 
  CircleCheck, CircleClose, Warning 
} from '@element-plus/icons-vue'
import { problemsApi } from '@/api/problems'

// 扩展Problem类型以包含所需属性
interface ExtendedProblem {
  id: number
  title: string
  description: string
  type: 'choice' | 'blank' | 'code' | 'short'
  difficulty: 'easy' | 'medium' | 'hard'
  answer?: string
  test_cases?: string | any[]
  options?: string | string[]
  input_format?: string
  output_format?: string
  points: number
  time_limit?: number
  memory_limit?: number
  language?: string
  created_by: number
  status: string
  created_at: string
}
import { judgeApi, type JudgeResult } from '@/api/judge'
import MonacoEditor from '@/components/MonacoEditor.vue'

const route = useRoute()
const router = useRouter()

// 数据
const problem = ref<ExtendedProblem | null>(null)
const code = ref('')
const selectedLanguage = ref('python')
const submitting = ref(false)
const running = ref(false)
const runResult = ref<any>(null)

// 选择题相关
const selectedAnswer = ref('')
const blankAnswer = ref('')
const shortAnswer = ref('')

// 移除面板宽度控制相关代码

// Monaco编辑器配置
const editorOptions = {
  theme: 'vs-dark',
  fontSize: 14,
  minimap: { enabled: false },
  scrollBeyondLastLine: false,
  automaticLayout: true,
  wordWrap: 'on',
  lineNumbers: 'on',
  roundedSelection: false,
  scrollbar: {
    vertical: 'visible',
    horizontal: 'visible'
  }
}

// 获取题目详情
const loadProblem = async () => {
  try {
    const response = await problemsApi.getProblem(Number(route.params.id))
    problem.value = response
    selectedLanguage.value = problem.value?.language || 'python'
    
    // 加载保存的代码
    const savedCode = localStorage.getItem(`problem_${route.params.id}_code`)
    if (savedCode) {
      code.value = savedCode
    } else {
      // 设置默认代码模板
      code.value = getDefaultCode(selectedLanguage.value)
    }
  } catch (error) {
    console.error('加载题目失败:', error)
    ElMessage.error('加载题目失败')
  }
}

// 获取默认代码模板
const getDefaultCode = (language: string) => {
  const templates: Record<string, string> = {
    python: `# 请在这里编写你的代码
def solution():
    pass

# 测试代码
if __name__ == "__main__":
    result = solution()
    print(result)`,
    java: `public class Solution {
    public static void main(String[] args) {
        // 请在这里编写你的代码
        System.out.println("Hello World");
    }
}`,
    cpp: `#include <iostream>
using namespace std;

int main() {
    // 请在这里编写你的代码
    cout << "Hello World" << endl;
    return 0;
}`,
    javascript: `// 请在这里编写你的代码
function solution() {
    // 你的代码
}

// 测试代码
console.log(solution());`
  }
  return templates[language] || templates.python
}

// 保存代码
const saveCode = () => {
  localStorage.setItem(`problem_${route.params.id}_code`, code.value)
  ElMessage.success('代码已保存')
}

// 运行代码
const runCode = async () => {
  if (!code.value.trim()) {
    ElMessage.warning('请先编写代码')
    return
  }
  
  running.value = true
  try {
    const response = await judgeApi.runCode({
      problem_id: Number(route.params.id),
      language: selectedLanguage.value,
      code: code.value
    })
    
    runResult.value = {
      status: response.status,
      output: response.test_cases?.[0]?.output || '',
      error: response.error_message,
      executionTime: response.execution_time,
      memoryUsage: response.memory_usage,
      testResults: response.test_cases
    }
    
    if (response.status === 'AC') {
      ElMessage.success('代码运行成功！')
    } else {
      ElMessage.warning(`代码运行完成，状态: ${response.status}`)
    }
  } catch (error: any) {
    console.error('运行代码失败:', error)
    ElMessage.error(error.response?.data?.message || '运行代码失败')
  } finally {
    running.value = false
  }
}

// 提交代码
const submitCode = async () => {
  if (!code.value.trim()) {
    ElMessage.warning('请先编写代码')
    return
  }
  
  try {
    await ElMessageBox.confirm('确定要提交代码吗？', '确认提交', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    submitting.value = true
    const response = await judgeApi.submitCode({
      problem_id: Number(route.params.id),
      language: selectedLanguage.value,
      code: code.value
    })
    
    ElMessage.success(`提交成功！得分: ${response.score}/${response.max_score}`)
    
    // 显示提交结果
    runResult.value = {
      status: response.status,
      output: response.test_cases?.[0]?.output || '',
      error: response.error_message,
      executionTime: response.execution_time,
      memoryUsage: response.memory_usage,
      testResults: response.test_cases
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('提交失败:', error)
      ElMessage.error(error.response?.data?.message || '提交失败')
    }
  } finally {
    submitting.value = false
  }
}

// 代码变化处理
const onCodeChange = (value: string) => {
  code.value = value
}

// 监听语言变化，更新代码模板
const updateCodeTemplate = () => {
  if (!code.value.trim() || code.value === getDefaultCode(selectedLanguage.value)) {
    code.value = getDefaultCode(selectedLanguage.value)
  }
}

// 提交非编程题答案
const submitAnswer = async () => {
  let answer = ''
  
  if (problem.value?.type === 'choice') {
    answer = selectedAnswer.value
  } else if (problem.value?.type === 'blank') {
    answer = blankAnswer.value
  } else if (problem.value?.type === 'short') {
    answer = shortAnswer.value
  }
  
  if (!answer.trim()) {
    ElMessage.warning('请先填写答案')
    return
  }
  
  submitting.value = true
  try {
    // 这里应该调用提交答案的API
    await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟API调用
    ElMessage.success('答案提交成功！')
  } catch (error: any) {
    console.error('提交答案失败:', error)
    ElMessage.error('提交答案失败')
  } finally {
    submitting.value = false
  }
}

// 工具函数
const getTypeTagType = (type: string) => {
  const typeMap: Record<string, string> = {
    choice: 'success',
    blank: 'warning',
    code: 'primary',
    short: 'info'
  }
  return typeMap[type] || 'info'
}

const getTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    choice: '选择题',
    blank: '填空题',
    code: '编程题',
    short: '简答题'
  }
  return typeMap[type] || type
}

const getDifficultyType = (difficulty: string) => {
  const difficultyMap: Record<string, string> = {
    easy: 'success',
    medium: 'warning',
    hard: 'danger'
  }
  return difficultyMap[difficulty] || 'info'
}

const getDifficultyText = (difficulty: string) => {
  const difficultyMap: Record<string, string> = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return difficultyMap[difficulty] || difficulty
}

const formatDescription = (description: string) => {
  return description.replace(/\n/g, '<br>')
}

const parseOptions = (options: string | string[]) => {
  if (Array.isArray(options)) {
    return options
  }
  try {
    return JSON.parse(options)
  } catch {
    return []
  }
}

const parseTestCases = (testCases: string | any[]) => {
  if (Array.isArray(testCases)) {
    return testCases
  }
  try {
    return JSON.parse(testCases)
  } catch {
    return []
  }
}

const getResultStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    AC: '答案正确',
    WA: '答案错误',
    CE: '编译错误',
    TLE: '时间超限',
    MLE: '内存超限',
    RE: '运行时错误',
    PE: '格式错误',
    success: '运行成功',
    error: '运行错误',
    timeout: '运行超时',
    memory: '内存超限'
  }
  return statusMap[status] || status
}

// 监听语言变化
watch(selectedLanguage, updateCodeTemplate)

onMounted(() => {
  loadProblem()
})

onUnmounted(() => {
  // 保存代码到本地存储
  if (code.value.trim()) {
    localStorage.setItem(`problem_${route.params.id}_code`, code.value)
  }
})
</script>

<style scoped lang="scss">
.solve-problem-container {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;

  .page-title {
    margin: 0;
    color: var(--el-text-color-primary);
  }
}

.problem-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
}

.problem-description {
  background: var(--el-bg-color);
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
  height: fit-content;

  h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--el-text-color-primary);
  }

  .description-content {
    color: var(--el-text-color-regular);
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .problem-details {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;

    .points {
      color: var(--el-text-color-secondary);
      font-size: 14px;
      font-weight: 600;
      background: var(--el-fill-color-light);
      padding: 4px 8px;
      border-radius: 4px;
    }
  }

  .choice-options {
    margin-bottom: 30px;

    h4 {
      color: var(--el-text-color-primary);
      margin-bottom: 15px;
      font-size: 1.1rem;
    }

    .options-list {
      .option-item {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        margin-bottom: 10px;
        border: 2px solid var(--el-border-color-light);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          border-color: var(--el-color-primary);
          background: var(--el-fill-color-light);
        }

        &.selected {
          border-color: var(--el-color-primary);
          background: var(--el-color-primary);
          color: white;
        }

        .option-label {
          font-weight: 600;
          margin-right: 10px;
          min-width: 20px;
        }

        .option-text {
          flex: 1;
        }
      }
    }
  }

  .blank-answer, .short-answer {
    margin-bottom: 30px;

    h4 {
      color: var(--el-text-color-primary);
      margin-bottom: 15px;
      font-size: 1.1rem;
    }
  }

  .example-section {
    margin-bottom: 20px;

    h4 {
      margin-top: 0;
      margin-bottom: 12px;
      color: var(--el-color-primary);
      font-size: 16px;
      font-weight: 600;
    }

    .example-item {
      margin-bottom: 12px;
      padding: 12px 16px;
      background: var(--el-fill-color-light);
      border: 1px solid var(--el-border-color-light);
      border-radius: 6px;
      font-family: monospace;

      strong {
        color: var(--el-color-primary);
        margin-right: 8px;
      }
    }

    .example-content {
      margin: 8px 0 0 0;
      padding: 8px 12px;
      background: var(--el-bg-color);
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 4px;
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 13px;
      line-height: 1.4;
      white-space: pre-wrap;
      color: var(--el-text-color-regular);
    }

    .example-note {
      margin-top: 12px;
      padding: 10px 12px;
      background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(103, 194, 58, 0.1));
      border: 1px solid var(--el-border-color-lighter);
      border-left: 4px solid var(--el-color-primary);
      border-radius: 4px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--el-text-color-regular);

      strong {
        color: var(--el-color-primary);
        margin-right: 8px;
      }
    }
  }

  .format-section {
    margin-bottom: 20px;

    h4 {
      color: var(--el-color-primary);
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 600;
    }

    .format-content {
      background-color: var(--el-fill-color-light);
      border: 1px solid var(--el-border-color-light);
      border-radius: 6px;
      padding: 15px;
      margin: 0;
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 13px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-word;
      color: var(--el-text-color-regular);
      overflow-x: auto;
    }
  }

  .constraints-section {
    margin-bottom: 20px;

    h4 {
      color: var(--el-color-warning);
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 600;
    }

    .constraint-item {
      margin-bottom: 10px;
      padding: 12px 16px;
      background: var(--el-fill-color-extra-light);
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 6px;
      font-family: monospace;
      font-size: 14px;
      color: var(--el-text-color-regular);
      line-height: 1.5;

      strong {
        color: var(--el-color-warning);
        margin-right: 8px;
        font-weight: 600;
      }

      &:last-child {
        background: linear-gradient(135deg, rgba(230, 162, 60, 0.1), rgba(64, 158, 255, 0.1));
        border-left: 4px solid var(--el-color-warning);
        font-weight: 500;
      }
    }
  }

  .tips-section {
    margin-bottom: 20px;

    h4 {
      color: var(--el-color-success);
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 600;
    }

    .tip-item {
      margin-bottom: 8px;
      padding: 10px 12px;
      background: linear-gradient(135deg, rgba(103, 194, 58, 0.1), rgba(64, 158, 255, 0.1));
      border: 1px solid var(--el-border-color-lighter);
      border-left: 4px solid var(--el-color-success);
      border-radius: 4px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--el-text-color-regular);

      strong {
        color: var(--el-color-success);
        margin-right: 8px;
      }
    }
  }
}

.code-editor-section {
  .editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      margin: 0;
      color: var(--el-text-color-primary);
    }

    .editor-actions {
      display: flex;
      gap: 12px;
    }
  }

  .code-editor {
    margin-bottom: 20px;
    height: 400px;
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;

    .code-textarea {
      font-family: "Consolas", "Monaco", "Courier New", monospace;
      font-size: 14px;
      line-height: 1.5;
    }
  }

  .output-section {
    h4 {
      margin-top: 0;
      margin-bottom: 12px;
      color: var(--el-text-color-primary);
    }

    .output-content {
      background: var(--el-fill-color-light);
      border: 1px solid var(--el-border-color-light);
      border-radius: 4px;
      padding: 16px;
      min-height: 200px;

      .output-text {
        font-family: monospace;
        white-space: pre-wrap;
        color: var(--el-text-color-primary);

        .result-status {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 15px;
          font-weight: 600;
          font-size: 1rem;

          &.AC {
            color: var(--el-color-success);
          }

          &.WA {
            color: var(--el-color-danger);
          }

          &.CE {
            color: var(--el-color-warning);
          }
        }

        .test-results {
          margin-top: 15px;

          .test-result-item {
            margin-bottom: 15px;
            padding: 12px;
            border: 1px solid var(--el-border-color-light);
            border-radius: 6px;
            background: var(--el-bg-color);

            .test-result-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;
              font-weight: 600;
            }

            .test-result-content {
              div {
                margin-bottom: 8px;
                font-size: 14px;
              }
            }
          }
        }

        .result-meta {
          margin-top: 15px;
          font-size: 14px;
          color: var(--el-text-color-secondary);
        }
      }

      .no-output {
        color: var(--el-text-color-placeholder);
        text-align: center;
        padding: 20px;
      }
    }
  }
}

.submit-section {
  text-align: center;
  margin-top: 24px;
}

.loading-container {
  padding: 40px;
}

// 响应式设计
@media (max-width: 1200px) {
  .problem-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .solve-problem-container {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .editor-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    .editor-actions {
      width: 100%;
      justify-content: space-between;
    }
  }
}
</style>




